<template>
  <div>
    <div class="title-menu">
      <Item :isActive="isActive" @active="click">
        <div class="inner">
          <div class="left">
            <!--具名插槽-->
            <slot name="title"></slot>
          </div>
          <div class="right">
            <slot name="icon"></slot>
          </div>
        </div>
      </Item>
    </div>
    <div class="drop" ref="drop" hidden>
      <Item v-for="(item,i) in childMenu" @active="handlerClick(item,i)">
        {{ item.name }}
      </Item>
    </div>
  </div>
</template>
<script>

import Item from "./Item";
import MenuList from "@/components/MenuList";

export default {
  name: "TitleMenu",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
    childMenu: {
      type: Array,
    }
  },
  data() {
    return {
      isDrop: false,
    }
  },
  components: {
    Item,
    MenuList,
  },
  methods: {
    click() {
      this.isDrop = !this.isDrop;
      if (this.isDrop) this.$refs.drop.removeAttribute('hidden');
      else this.$refs.drop.setAttribute('hidden', '');
      this.$emit('active');
    },
    handlerClick(item, i) {
      this.$emit('clickMenu', item, i);
    }
  },
}
</script>

<style scoped>

.title-menu {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.drop {
  width: 100%;
  line-height: 40px;
  background-color: #f1f1f1;
}

.inner {
  padding: 0 20px;
}

.left {
  float: left;
  color: #212121;
  font-weight: 500;
}

.right {
  float: right;
  font-size: 20px;
}

</style>